<template>
  <div>
    <div>
      <div id="editor-container" style="width: 100%;height: auto"></div>
    </div>
  </div>
</template>

<script>
import request from '../../utils/request'
import axios from 'axios'
//import E from "wangeditor"
export default {
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  data () {
    return {
      editor: null,
      contents: ""
    };
  },

  watch: {
    value: {
      handler (val) {
        if (val !== this.contents) {
          this.contents = val === null ? "" : val;
          if (this.editor) {
            this.editor.txt.clear()
            this.editor.txt.html(this.contents)
          }
        }
      },
      immediate: true,
    },
  },
  mounted () {
    this.initEditor();
  },

  methods: {
    initEditor () {
      this.editor = new E("#editor-container")
      const editor = this.editor
      editor.config.menus = [
        'head',
        'bold',
        'fontSize',
        'fontName',
        'italic',
        'underline',
        'strikeThrough',
        'indent',
        'lineHeight',
        'foreColor',
        'backColor',
        'list',
        'justify',
        'image',
        'splitLine',
        'undo',
        'redo',
        'video'
      ]
      editor.config.customUploadImg = (resultFiles, insertImgFn) => {
        console.log('resultFiles', resultFiles)
        let form = new FormData()
        form.append('file', resultFiles[0])
        const url = request.baseURL + '/api/server/img/upload'
        axios.post(url, form, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(response => {
          console.log(response)
          this.$message.success("图片上传成功")
          insertImgFn(response.data.data)
        }).catch(error => {
          console.log(error)
          this.$message.error("图片传失败")
        })
      }
      editor.config.customUploadVideo = (resultFiles, insertVideoFn) => {
        console.log('resultFiles', resultFiles)
        let form = new FormData()
        form.append('file', resultFiles[0])
        const url = request.baseURL + '/api/server/img/upload'
        axios.post(url, form, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(response => {
          console.log(response)
          this.$message.success("视频上传成功")
          //insertVideoFn(response.data.data)
          insertVideoFn(response.data.data)
          var videoElement = document.querySelector('.w-e-text video');
          //videoElement.style.display = 'block';
          videoElement.style.marginLeft = '50%';
          videoElement.style.transform = 'translateX(-50%)';
        }).catch(error => {
          console.log(error)
          this.$message.error("视频传失败")
        })
      },
        editor.config.onlineVideoCheck = function (video) {
          // 编辑器会根据返回的内容做校验：比如以下几种情况
          var videoHtml = '<div style="display:flex;justify-content"><video src="' + video + '"></video></div>';
          editor.cmd.do('insertHTML', videoHtml);
          this.editor.txt.clear(videoHtml)
          // 1. 返回 true ，说明检查通过
          return true

          // 2. 返回一个字符串，说明检查未通过，编辑器会阻止视频插入。会 alert 出错误信息（即返回的字符串）
          // return '插入的视频 有 xxx 错误'

          // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止视频插入。
          // 此处，你可以自定义提示错误信息，自由发挥
        }
      editor.config.onchange = (newHtml) => {
        this.contents = newHtml
        this.$emit("input", newHtml);
      };
      editor.create()
    }
  },
  beforeDestroy () {
    // 销毁编辑器
    this.editor.destroy()
    this.editor = null
  },
};
</script>

<style lang="scss" scoped>
.ss {
  transform: translateX(-50%);
}
</style>